<template>
    <div class="container">
        <!-- 搜索 -->
        <div class="search-class">
            <a-space>
                <a-select v-model="searchCondition.difficultLevel" placeholder="题目难度" allow-clear>
                    <a-option value="一星级">一星级</a-option>
                    <a-option value="二星级">二星级</a-option>
                    <a-option value="三星级">三星级</a-option>
                </a-select>
                <a-select v-model="searchCondition.tagList" size="small" placeholder="选择标签" multiple>
                    <a-option>Java</a-option>
                    <a-option>C++</a-option>
                    <a-option>数据结构</a-option>
                    <a-option>算法</a-option>
                </a-select>
                <a-input v-model="searchCondition.no" placeholder="问题编号" allow-clear />
                <a-input v-model="searchCondition.title" placeholder="问题标题" allow-clear />
                <a-button type="primary" shape="round" @click="doSearch">搜索</a-button>
            </a-space>
        </div>

        <!-- 表格 -->
        <div class="question-list-class">
            <a-table :columns="columns" :data="data" :pagination="false">
                <template #optional="{ record }">
                    <a-button type="primary" @click="doAnswer(record.id)">去做题</a-button>
                </template>
            </a-table>
            <div>
                <a-pagination :total="page.total" @change="doPageChange" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { questionQueryPage } from '@/api/question';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

/**
 * 跳转去做题页面
 * @param value 题目 Id
 */
const doAnswer = (value: number) => {
    router.push({
        path: '/answer/details',
        query: {
            id: value
        }
    })
}

// 分页数据
const page = ref({
    total: 0,
    currentPage: 1,
    pageSize: 10,
})

// 搜索条件定义
const searchCondition = ref({
    difficultLevel: '',
    tagList: [],
    no: '',
    title: '',
})

// 定义列表表头
const columns = [
    {
        title: '题目编号',
        dataIndex: 'no',
    },
    {
        title: '问题标题',
        dataIndex: 'title',
    },
    {
        title: '难度等级',
        dataIndex: 'difficultLevel',
    },
    {
        title: '标签',
        dataIndex: 'tagList',
    },
    {
        title: '提交',
        dataIndex: 'submitNum',
    },
    {
        title: '解决',
        dataIndex: 'solveNum',
    },
    {
        title: '通过率',
        dataIndex: 'passRate',
    },
    {
        title: '操作',
        slotName: 'optional'
    }
];

// 列表数据对象
const data = ref([]);

/**
 * 加载页面数据
 */
const loadData = async (currentPage: number, pageSize: number) => {
    const res = await questionQueryPage(currentPage, pageSize, searchCondition.value);
    page.value.total = res.data.total;
    data.value = res.data.records;
    Message.success('请求成功');
}

onMounted(async () => {
    loadData(page.value.currentPage, page.value.pageSize);
});

/**
 * 搜索
 */
const doSearch = () => {
    loadData(page.value.currentPage, page.value.pageSize);
}

/**
 * 分页页码改变函数
 * @param current 
 */
const doPageChange = (current: number) => {
    page.value.currentPage = current;
    // 重新加载数据
    loadData(current, page.value.pageSize)
}

</script>

<style lang="less" scoped>
.container {
    background-color: var(--color-fill-2);
    padding: 16px 20px;
    padding-bottom: 0;
}

.search-class {
    margin: 20px 0px;
    border: 1px solid #dddbdb;
    padding-right: 30px;
}
</style>